<template>
    <div style="width:100%;">
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card shadow="hover" class="mgb20" style="height: 252px">
                    <div class="user-info">
                        <!-- <img style="width:60px;height: 60px;" src="" class="user-avator" alt /> -->
                        <img :src="imageUrl" style="width:60px;height: 60px;" class="user-avator" alt />
                        <div class="user-info-cont">
                            <div class="user-info-name">{{userName}}</div>
                            <div>{{realName}}</div>
                            <div style="margin-left:240px"><el-button @click="show3 = !show3">修改我的信息</el-button></div>
                        </div>
                    </div>
                    <div class="user-info-list" style="font-size:12px;">
                        登录时间：
                          {{loginLog.loginTimeStr}}
                    </div>
                    <div class="user-info-list" >
                        登录IP：
                         {{loginLog.ipaddr}}
                    </div>
                </el-card>
                <el-card shadow="hover" style="height: 252px">
                    <div slot="header" class="clearfix">
                        <span>语言详情</span>
                    </div>
                    Vue <el-progress :percentage="71.3" color="#42b983"></el-progress>JavaScript
                    <el-progress :percentage="24.1" color="#f1e05a"></el-progress>CSS <el-progress :percentage="13.7"></el-progress>HTML
                    <el-progress :percentage="5.9" color="#f56c6c"></el-progress>
                </el-card>
            </el-col>
            <el-col :span="16">
                <!-- <el-row :gutter="20" class="mgb20">
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-1">
                                <i class="el-icon-lx-people grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">1234</div>
                                    <div>用户访问量</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-2">
                                <i class="el-icon-lx-notice grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">321</div>
                                    <div>系统消息</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-3">
                                <i class="el-icon-lx-goods grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">5000</div>
                                    <div>数量</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row> -->
                
                <el-card id="imgs">
                    <el-carousel :interval="4000" type="card" height="500px">
                    <el-carousel-item v-for="item in 6" :key="item">
                    <h3 class="medium">{{ item }}</h3>
                    </el-carousel-item>
                </el-carousel>
                </el-card>
                <el-card shadow="hover" style="height: 680px" v-show="show3" id="userinfo">
                    <div slot="header" class="clearfix">
                        <span>个人信息</span>
                        <!-- <el-button style="float: right; padding: 3px 0" type="text">添加</el-button> -->
                    </div>
                    <div style="margin-top: 10px; height: 220px;">
                        <el-collapse-transition>
                            <div v-show="show3">
                            <div class="transition-box">
                                <el-form :model="form" status-icon :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
                                    <el-row>
                                        <el-col :span="8">
                                        <el-form-item label="用户编号" :label-width="formLabelWidth" v-if="isShow">
                                            <el-input v-model="form.userId" auto-complete="off" :disabled="true"></el-input>
                                        </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                        <el-form-item label="账号" :label-width="formLabelWidth" prop="loginNum">
                                            <el-input v-model="form.loginName" auto-complete="off" disabled="true"></el-input>
                                        </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                             <el-form-item label="姓名" :label-width="formLabelWidth" prop="userName">
                                                <el-input v-model="form.userName" auto-complete="off"></el-input>
                                            </el-form-item>
                                        </el-col> 
                                    </el-row>
                                    <!-- <el-row>
                                        <el-col :span="8">
                                            <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
                                                <el-input v-model="form.password" auto-complete="off" show-password></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="确认密码" :label-width="formLabelWidth" prop="checkPass">
                                                <el-input v-model="form.checkPass" auto-complete="off" show-password></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-row> -->
                                    <el-row>
                                        <el-col :span="8">
                                            <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email"
                                            :rules="[
                                            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                                            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                                            ]">
                                                <el-input v-model="form.email" auto-complete="off"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="手机号码" :label-width="formLabelWidth" prop="phonenumber">
                                                <el-input v-model="form.phonenumber" auto-complete="off"></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="8">
                                            <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
                                                <el-radio v-model="form.sex" label="0">男</el-radio>
                                                <el-radio v-model="form.sex" label="1">女</el-radio>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="8">
                                            <el-form-item label="头像">
                                                <el-upload
                                                        class="avatar-uploader"
                                                        action="http://localhost:11930/api/cs/commonOSS/upload"
                                                        name="file"
                                                        :on-success="handleAvatarSuccess"
                                                        :before-upload="beforeAvatarUpload">
                                                    <img v-if="imageUrl_form" :src="imageUrl_form" class="avatar" width="150px" height="130px">
                                                    <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                                                </el-upload>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            &nbsp;
                                        </el-col>
                                        <el-col :span="8">
                                            <div style="margin-top:90px;margin-left:100px">
                                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                                <el-button type="primary" @click="addOrUpdate('form')">确 定</el-button>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </el-form>
                                
                            </div>
                            <!-- <div class="transition-box">el-collapse-transition</div> -->
                            </div>
                        </el-collapse-transition>
                    </div>
                   
                    
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card shadow="hover">
                    <schart ref="bar" class="schart" canvasId="bar" :options="options"></schart>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="hover">
                    <schart ref="line" class="schart" canvasId="line" :options="options2"></schart>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Schart from 'vue-schart';
//import bus from '../common/bus';
export default {
    name: 'dashboard',
    data() {
            //验证密码
            var validatePass = (rule, value, callback) => {
            if (value == undefined) {
            callback(new Error('请输入密码'));
            } else {
                // alert(this.form.checkPass);
            if (this.form.checkPass!=undefined) {
                this.$refs.form.validateField('checkPass');
            }
            callback();
            }
        };
        //验证两次输入的密码是否一样
        var validatePass2 = (rule, value, callback) => {
            if (value == undefined) {
            callback(new Error('请再次输入密码'));
            } else if (value !== this.form.password) {
            callback(new Error('两次输入密码不一致!'));
            } else {
            callback();
            }
        };
        //验证手机号
        var checkPhoneNumber = (rule, value, callback) => {
            const reg = /^1[3|4|5|6|7|8|9]\d{9}$/;
            if (!value) {
                return callback(new Error('请填写手机号码！'))
            } else if (!reg.test(value)) {
                return callback(new Error('请填写正确的手机号码！'))
            }else{
                callback()
            }
        };
        return {
            userName: localStorage.getItem('userName'),
            realName: localStorage.getItem('loginName'),
            loginLog:{},
            imageUrl:'',  //头像
            imageUrl_form:'',
            form:{},
            show3: true,
            todoList: [
                {
                    title: '今天要修复100个bug',
                    status: false
                },
                {
                    title: '今天要写100行代码加几个bug吧',
                    status: false
                },
                {
                    title: '今天要修复100个bug',
                    status: false
                },
                {
                    title: '今天要写100行代码加几个bug吧',
                    status: true
                }
            ],
            data: [
                {
                    name: '2018/09/04',
                    value: 1083
                },
                {
                    name: '2018/09/05',
                    value: 941
                },
                {
                    name: '2018/09/06',
                    value: 1139
                },
                {
                    name: '2018/09/07',
                    value: 816
                },
                {
                    name: '2018/09/08',
                    value: 327
                },
                {
                    name: '2018/09/09',
                    value: 228
                },
                {
                    name: '2018/09/10',
                    value: 1065
                }
            ],
            options: {
                // type: 'bar',
                // title: {
                //     text: '最近一周各品类销售图'
                // },
                // xRorate: 25,
                // labels: ['周一', '周二', '周三', '周四', '周五'],
                // datasets: [
                //     {
                //         label: '家电',
                //         data: [234, 278, 270, 190, 230]
                //     },
                //     {
                //         label: '百货',
                //         data: [164, 178, 190, 135, 160]
                //     },
                //     {
                //         label: '食品',
                //         data: [144, 198, 150, 235, 120]
                //     }
                // ]
            },
            options2: {
                // type: 'line',
                // title: {
                //     text: '最近几个月各品类销售趋势图'
                // },
                // labels: ['6月', '7月', '8月', '9月', '10月'],
                // datasets: [
                //     {
                //         label: '家电',
                //         data: [234, 278, 270, 190, 230]
                //     },
                //     {
                //         label: '百货',
                //         data: [164, 178, 150, 135, 160]
                //     },
                //     {
                //         label: '食品',
                //         data: [74, 118, 200, 235, 90]
                //     }
                // ]
            },
            //表单验证
            rules:{
                userName:[
                        { required: true, message: '请输入您的真实姓名', trigger: 'blur' },
                        { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ],
                password:[
                        { required: true, validator: validatePass, trigger: 'blur' }
                ],
                checkPass: [
                        { required: true, validator: validatePass2, trigger: 'blur' }
                ],
                phonenumber: [{ required: true, validator: checkPhoneNumber, trigger: 'blur' }],
            },
        };
        
    },
    mounted:function(){
        //获取登录时间和ip
        this.$http.get("/api/cs/loginLog/selectOneByUserName?userName="+localStorage.getItem("loginName")
        ).then((response) => {
                // console.log("最新登录日志。。。"+JSON.stringify(response))
                  //  console.log("最新登录日志时间。。。"+ response.loginTime)
                 this.loginLog=response.data;
              })
    },
    components: {
        Schart
    },
    computed: {
          
    },
    // created() {
    //     this.handleListener();
    //     this.changeDate();
    // },
    // activated() {
    //     this.handleListener();
    // },
    // deactivated() {
    //     window.removeEventListener('resize', this.renderChart);
    //     bus.$off('collapse', this.handleBus);
    // },
    created:function(){
            this.loadImg();
     },
    methods: {
        //获取登录用户的头像
        loadImg(){
            var _this = this;
                this.$http.get('/api/cs/user/queryByUserName?userName='+localStorage.getItem("loginName")
                )
                .then(function (response) {
                        //正确请求时，回调函数
                        console.log(response);
                        if(response.data!=null){
                            _this.imageUrl=response.data.avatar;
                            _this.form={sex:response.data.sex};
                            _this.form=response.data;
                            _this.imageUrl_form=response.data.avatar;
                        }else{
                            console.log("==========");
                        }
                    })
                    .catch(function (error) {
                        //失败处理
                        console.log(error);
                        console.log("==========");
                    });
        },
        changeDate() {
            const now = new Date().getTime();
            this.data.forEach((item, index) => {
                const date = new Date(now - (6 - index) * 86400000);
                item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
            });
        },
        //头像上传成功之后的处理
              handleAvatarSuccess(res,file){
                  this.imageUrl_form=URL.createObjectURL(file.raw);
                  console.log("返回值-》名称："+file.response.oldFileName
                  +"新路径："+file.response.filePath);
                  console.log(file.response);
                  this.form.avatar=file.response.ossFileUrlBoot;
              },
              //图片上传之前的处理
              beforeAvatarUpload(file) {
                  // const isJPG = file.type === 'image/jpeg';
                  //file.size 上传图片的大小，单位为字节
                  const isLt5M = file.size / 1024 / 1024 < 5;

                  // if (!isJPG) {
                  //     this.$message.error('上传头像图片只能是 JPG 格式!');
                  // }
                  if (!isLt5M) {
                      this.$message.error('上传头像图片大小不能超过 5MB!');
                  }
                  return isLt5M;
              },

            //提交表单数据（添加或者更新）
            addOrUpdate(formName){
                this.$refs[formName].validate((valid) => {
                    if (!valid) {
                        console.log('error submit!!');
                        // alert("#########@@@@@@@@@@@@@######");
                        return false;
                    } else {
                        // alert('submit!');
                        // alert("###############");
                         var  url ='/api/cs/user/update';
                        var _this=this;
                        this.form.updateBy=this.realName;
                        //提交方法
                        this.$http.post(url, this.form)
                            .then(function (response) {
                                console.log(response);
                                //提交成功
                                if(response.data.code==2000){
                                    _this.imageUrl=_this.imageUrl_form;
                                    //提示更新成功
                                    _this.$message({
                                        //  message: '恭喜你，这是一条成功消息',
                                        message: response.data.message,
                                        type: 'success'
                                    });
                                }else {
                                    _this.$message.error(response.data.message);
                                }
                            })
                            .catch(function (error) {
                                _this.$message.error('错了哦，这是一条错误消息');
                            });
                    }
                });
            },
        // handleListener() {
        //     bus.$on('collapse', this.handleBus);
        //     // 调用renderChart方法对图表进行重新渲染
        //     window.addEventListener('resize', this.renderChart);
        // },
        // handleBus(msg) {
        //     setTimeout(() => {
        //         this.renderChart();
        //     }, 200);
        // },
        // renderChart() {
        //     this.$refs.bar.renderChart();
        //     this.$refs.line.renderChart();
        // }
    }
};
</script>


<style scoped>
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}
.transition-box {
    margin-bottom: 10px;
    width: 1000px;
    height: 537px;
    border-radius: 4px;
    background-color:#ADD8E6;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
    background:url(../assets/a.gif) no-repeat;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
    background:url(../assets/b.gif) no-repeat;
  }
  #imgs{
      /* z-index: 10; */
      /* display: block; */
      position:absolute;
      height: 530px;
      width: 1070px;
      z-index:-10;
  }
  #userinfo{
      z-index: 60;
  }
</style>
